﻿@inherits AppComponentBase

<header class="header" id="mainHeader">
    <div class="header-container">
        <div class="logo-container">
            <a class="bit-logo" href="/"></a>
        </div>

        <div class="header-content">
            <a class="header-lnk @(currentUrl == "/" ? "header-lnk--active" : "")" href="/">Home<span class="@(currentUrl == "/" ? "header-lnk-border" : "")"></span></a>
            <a class="header-lnk @(currentUrl == "/cases" ? "header-lnk--active" : "")" href="/cases">Cases<span class="@(currentUrl == "/cases" ? "header-lnk-border" : "")"></span></a>
            <a class="header-lnk @(currentUrl == "/services" ? "header-lnk--active" : "")" href="/services">Services<span class="@(currentUrl == "/services" ? "header-lnk-border" : "")"></span></a>
            <a class="header-lnk @(currentUrl == "/yourteam" ? "header-lnk--active" : "")" href="/yourteam">Your Team<span class="@(currentUrl == "/yourteam" ? "header-lnk-border" : "")"></span></a>
            <a class="header-lnk @(currentUrl == "/about" ? "header-lnk--active" : "")" href="/about">About<span class="@(currentUrl == "/about" ? "header-lnk-border" : "")"></span></a>
            <button class="header-btn" onclick="App.scrollToContactUs()">Free Consultation</button>
        </div>
        <div class="header-menu-btn" id="headerMenuBtn" @onclick="@OpenMenu"></div>
    </div>
</header>

@if (isMenuOpen)
{
    <section class="menu-shadow" id="menuShadow" @onclick="CloseMenu">
        <div class="menu" id="menu" @onclick:stopPropagation="true">
            <div class="menu-top-bar">
                <div class="close-btn" id="menuCloseBtn" @onclick="CloseMenu"></div>
            </div>

            <div class="menu-content">
                <a class="menu-lnk @(currentUrl== "/" ? "menu-lnk--active" : "")" href="/">Home<span class="@(currentUrl== "/" ? "menu-link-border" : "")"></span></a>
                <a class="menu-lnk @(currentUrl== "/cases" ? "menu-lnk--active" : "")" href="/cases">Cases<span class="@(currentUrl== "/cases" ? "menu-link-border" : "")"></span></a>
                <a class="menu-lnk @(currentUrl== "/services" ? "menu-lnk--active" : "")" href="/services">Services<span class="@(currentUrl== "/services" ? "menu-link-border" : "")"></span></a>
                <a class="menu-lnk @(currentUrl== "/yourteam" ? "menu-lnk--active" : "")" href="/yourteam">Your Team<span class="@(currentUrl== "/yourteam" ? "menu-link-border" : "")"></span></a>
                <a class="menu-lnk @(currentUrl== "/about" ? "menu-lnk--active" : "")" href="/about">About<span class="@(currentUrl== "/about" ? "menu-link-border" : "")"></span></a>
                <button class="menu-header-btn" onclick="App.scrollToContactUs()">
                    <a class="menu-btn" id="contactUsBtn" @onclick="CloseMenu">Free Consultation</a>
                </button>
            </div>
        </div>
    </section>
}
